<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./wowjs文档/css/libs/animate.css" />
    <script src="./wowjs代码/wow.min.repeat.js"></script>
    <script src="js/wow.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet/less" href="./css/reset.less" />
    <link rel="stylesheet/less" href="./css/common.less" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .navbar-header a {
        margin-top: -8px !important;
      }
      img {
        display: block;
        width: 100%;
      }
      .navbar {
        margin-bottom: 0 !important;
      }
      .item-box1-bgcolor {
        margin-top: 3vw;
        background-color: #8bc01f;
      }
      .item-box1 {
        margin-top: 60px;
        padding-bottom: 67px;
      }
      .item-box1 .title-box {
      }
      .item-box1 .title-box .title {
        margin-bottom: 23px;
      }
      .item-box1 .title-box .title .num {
        display: inline-block;
        width: 55px;
        height: 55px;
        background-color: white;
        color: #8bc01f;
        font-size: 35px;
        text-align: center;
        font-weight: bold;
        border-radius: 1px;
      }
      .item-box1 .title-box .title .text {
        font-size: 35px;
        color: white;
        text-indent: 12px;
        display: inline-block;
        font-weight: bold;
      }
      .item-box1 .title-box .desc {
        color: white;
        font-size: 23px;
        margin-bottom: 68px;
        padding-left: 15px;
      }
      .item-box1 .content {
        color: white;
        font-size: 13px;
        padding-left: 15px;
      }
      .item-box1 .content > div {
        margin-bottom: 35px;
      }
      .item-box1 .download-btn {
        width: 100px;
        height: 34px;
        color: #8bc01f;
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        line-height: 34px;
        margin-left: 15px;
      }

      .item-box2-bgcolor{
        background-color: #3393df;
      }

      .item-box2{
        margin-top: 74px;
        margin-bottom: 61px;
      }
      .item-box2  .title {
        margin-bottom: 23px;
 
      }
      .item-box2  .title .num {
        display: inline-block;
        width: 55px;
        height: 55px;
        background-color: white;
        color: #3393df;
        font-size: 35px;
        text-align: center;
        font-weight: bold;
        border-radius: 1px;
      }
      .item-box2  .title .text {
        font-size: 35px;
        color: white;
        text-indent: 12px;
        display: inline-block;
        font-weight: bold;
      }
      .item-box2  .left{

      }
      .item-box2  .center {
margin-top: 20px;
      }
      .item-box2 .center .text1{
        color: white;
        margin-bottom: 35px;
      }
      .item-box2 .center .text1 .text1-title{
        font-size: 24px;
        margin-bottom: 18px;
      }
      .item-box2 .center .text1 .text1-desc{
        font-size: 13px;
        line-height: 18px;
      }
      .item-box2 .center .text2{
        color: white;
      }
      .item-box2 .center .text2 .text1-title{
        font-size: 24px;
        margin-bottom: 18px;
      }
      .item-box2 .center .text2 .text1-desc{
        font-size: 13px;
        line-height: 18px;
      }
      .item-box2 .right{
        margin-top: 146px;
      }
      .item-box3-bgcolor{
        background-color: white;
      }
      .item-box3{
        margin-top: 91px;
        margin-bottom: 86px;
      }
      .item-box3  .title-box{

        margin-bottom: 38px;
      }
      .item-box3  .title-box .title{
margin-bottom: 25px;
      }
      .item-box3  .title-box .title .num {
        display: inline-block;
        width: 55px;
        height: 55px;
        background-color: #3393df;
        color: white;
        font-size: 35px;
        text-align: center;
        font-weight: bold;
        border-radius: 1px;
      }
      .item-box3  .title-box .title .title-text {
        font-size: 35px;
        color: #3393df;
        text-indent: 12px;
        display: inline-block;
        font-weight: bold;
      }
      .item-box3  .title-box .desc{
        font-size: 18px;
      }
      .item-box3  .text{
margin-bottom: 38px;
      }
      .item-box3  .text .text-title{
        font-size: 17px;
        color: #3393df; 
        margin-bottom: 21px;
      }
      .item-box3  .text .text-desc{
        font-size: 14px;
        text-indent: 2em;
      }
      .item-box3 .right>div:nth-of-type(2){
        margin-bottom: 62px;
        
      
        
      }









      .item-box4-bgcolor{
        background-color: #f7f7f7;
      }
      .item-box4{
        margin-top: 91px;
        margin-bottom: 86px;
      }
      .item-box4  .title-box{

        margin-bottom: 38px;
      }
      .item-box4  .title-box .title{
margin-bottom: 25px;
      }
      .item-box4  .title-box .title .num {
        display: inline-block;
        width: 55px;
        height: 55px;
        background-color: #3393df;
        color: white;
        font-size: 35px;
        text-align: center;
        font-weight: bold;
        border-radius: 1px;
      }
      .item-box4  .title-box .title .title-text {
        font-size: 35px;
        color: #3393df;
        text-indent: 12px;
        display: inline-block;
        font-weight: bold;
      }
      .item-box4  .title-box .desc{
        font-size: 18px;
      }
      .item-box4  .text{
margin-bottom: 38px;
      }
      .item-box4  .text .text-title{
        font-size: 17px;
        color: #3393df; 
        margin-bottom: 21px;
      }
      .item-box4  .text .text-desc{
        font-size: 14px;
        text-indent: 2em;
      }


/* 底部导航 */
      .footer-bgcolor{
        background-color: #3b3b3b;
      }
      .footer{
        margin: 35px 0 37px;
      }
      .footer .left{
        font-size: 14px;
        color:#a1a3ab;
      }
      .footer .left .nav-title{
        margin-bottom: 15px;
      }
      .footer .left .copy{
        font-size: 11px;
      }
      .footer .right{
        display: flex;
        justify-content: space-evenly;
      }
      
      .footer .right .item:nth-child(1){
       
        width: 38px;
        height: 38px;
        background: url(./images/footer-icon01.png) no-repeat 0px 0px;
        background-size: cover;
      }
      .footer .right .item:nth-child(3){
       
        width: 38px;
        height: 38px;
        background: url(./images/footer-icon03.png) no-repeat 0px 0px;
        background-size: cover;
      }
      .footer .right .item:nth-child(2){
        position: relative;
        width: 38px;
        height: 38px;
        background: url(./images/footer-icon02.png) no-repeat 0px 0px;
        background-size: cover;
      }
      .footer .right .item:nth-child(2)>.qr-code{
position: absolute;
top: -150px;
left: -50px;
width: 142px;
height: 150px;
background: url(./images/footer-QR.png) no-repeat 0px 0px;
background-size: cover;
display: none;
      }
      .footer .right .item:nth-child(2):hover .qr-code{
        display: block;
      }
  
      @media((max-width:992px)){
        .item-box1 .right{
            display: none;
        }
        .item-box2  .title{
            text-align: center;
        }
        .item-box2 .left>img{
            max-width: 80%;
             margin: 0 auto;
        }
        .item-box2 .right>img{
            max-width: 80%;
             margin: 0 auto;
        }
        .item-box3 .right{
            margin-top: 20px;
        }
        .item-box4 .right{
            margin-top: 20px;
        }
        .footer .left{
          text-align: center;
          margin-bottom: 30px;
        }
       
      }
    </style>
  </head>
  <body>
    <!-- 导航栏开始 -->
    <nav class="navbar navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
            aria-expanded="false"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"
            ><img src="./images/logo.png" alt=""
          /></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="">
              <a href="./首页.html">首页</a>
            </li>
            <li><a href="./家族.html">Laya家族</a></li>
            <li><a href="./游戏.html">游戏</a></li>
            <li><a href="./新闻动态.html">新闻动态</a></li>
            <li><a href="#">开发者中心</a></li>
            <li><a href="#">开发者社区</a></li>
            <li><a href="#">开放平台</a></li>
            <li><a href="./关于我们.html">关于我们</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false"
                >Language <span class="caret"></span
              ></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
<!-- 导航栏结束 -->
    <div class="item-box1-bgcolor">
      <div class="container">
        <div class="item-box1 row">
          <div class="left col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="title-box">
              <div class="title wow bounceInDown"
              data-wow-delay="0.5s">
                <span class="num">1</span><span class="text">LayaFlash</span>
              </div>
              <div class="desc wow bounceInDown"
              data-wow-delay="0.7s">直接用Flash AS3语言开发HTML5的引擎</div>
            </div>
            <div class="content wow bounceInRight"
            data-wow-delay="0.9s">
              <div class="text1">
                支持Flash AS3语言及框架在Flash Builder、FlashDevelop中直接开发
                HTML5产品；
              </div>
              <div class="text2">
                支持将Flash页游\手游产品快速转换成为HTML5游戏，让Flash研发企业
                进入HTML5市场低成本、无门槛；
              </div>
              <div class="text3">
                支持Starling等3D框架，是首个支持HTML5 3D游戏的技术方案。
              </div>
            </div>
            <div class="download-btn wow bounceInLeft"
            data-wow-delay="1.1s">进入下载</div>
          </div>
          <div class="right wow bounceInRight col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <img src="./images2/image01.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="item-box2-bgcolor">
<div class="container">
   <div class="item-box2 row">
    <div class="title wow bounceInLeft" 
    data-wow-delay="0.5s">
        <span class="num">2</span>
        <span class="text">LayaPlayer</span>
    </div>
        <div class="left wow bounceInUp col-lg-4 col-md-4 col-sm-12 col-xs-12"
        data-wow-delay="0.8s">
<img src="./images2/image02.png" alt="">
        </div>
        <div class="center wow bounceIn col-lg-4 col-md-4 col-sm-12 col-xs-12"
        data-wow-delay="1s">
            <div class="text1">
                <div class="text1-title">极强性能</div>
                <div class="text1-desc">C语言编写的HTML5运行器，逻辑渲染双核运
                    行、GPU加速渲染、内存显存智能管理、渲染流
                    程极致优化，基于LayaPlayer运行的HTML5产品
                    性能媲美APP。</div>
            </div>
            <div class="text2">
                <div class="text2-title">更小，更多，更强</div>
                <div class="text2-desc">不足20K的HTML5运行器，拥有超过5亿的移动
                    设备安装量，已嵌入到QQ浏览器、QQ空间、百
                    度浏览器、新浪微博、猎豹浏览器等20多家主流
                    平台。</div>
            </div>
        </div>
        <div class="right wow bounceInDown col-lg-4 col-md-4 col-sm-12 col-xs-12"
        data-wow-delay="0.8s">
            <img src="./images2/image03.png"  alt="">
        </div>
   </div>
</div>
    </div>
    <div class="item-box3-bgcolor">
        <div class="container">
            <div class="item-box3 row">
<div class="left col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <div class="title-box">
        <div class="title wow bounceInDown" data-wow-delay="0.5s">
            <span class="num">3</span>
            <span class="title-text ">LayaAir</span>
        </div>
        <div class="desc wow bounceIn"
        data-wow-delay="0.5s">新一代HTML5引擎，正在内测完善中，敬请期待</div>
       
    </div>
    <div class="text wow bounceInLeft"
    data-wow-delay="0.5s">
        <div class="text-title">小巧强大</div>
        <div class="text-desc">      核心库100K左右，支持2D\3D动画、UI、粒子、骨骼、物理等完整功
            能，性能媲美APP</div>
    </div>
    <div class="text wow bounceInLeft"
    data-wow-delay="0.7s">
        <div class="text-title">应用领域更广泛</div>
        <div class="text-desc">      可广泛应用于小型游戏、大型游戏、广告、营销、H5应用、教育等领域</div>
    </div>
    <div class="text wow bounceInLeft"
    data-wow-delay="0.9s">
        <div class="text-title">多语言开发</div>
        <div class="text-desc">      支持AS3、TypeScript、JavaScript三种开发语言，适用程序员更广泛</div>
    </div>
    <div class="image wow rollIn"
    data-wow-delay="1s">
        <img src="./images2/image04.png" alt="" style="max-width: 30%; margin: 0 auto;"
        >
    </div>
</div>
<div class="right col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <div class="title-box">
        <div class="title wow bounceInDown"
        data-wow-delay="0.5s">
            <span class="num">4 </span>
            <span class="title-text">LayaOpen</span>
        </div>
        <div class="desc wow bounceIn"
        data-wow-delay="0.5s">面向Layabox开发者、流量渠道的一站式对接平台</div>
       
    </div>
    <div class="text wow bounceInLeft"
    data-wow-delay="0.5s">
        <div class="text-title">一站式对接</div>
        <div class="text-desc">      一次对接，全渠道发行，提供一站式对接、发行、运营服务</div>
    </div>
    <div class="text wow bounceInLeft"
    data-wow-delay="0.7s">
        <div class="text-title">免费测试</div>
        <div class="text-desc">      提供免费评测服务以及线上真实用户的产品测试和运营测试</div>
    </div>
    <div class="text wow bounceInLeft"
    data-wow-delay="0.9s">
        <div class="text-title">专业服务</div>
        <div class="text-desc">      提供最专业的用户数据、付费数据、产品数据等游戏运营数据统计系统</div>
    </div>
    <div class="image wow bounceInLeft"
    data-wow-delay="1s">
        <img src="./images2/image05.png" alt="" style="max-width: 30%; margin: 0 auto;">
    </div>
</div>
            </div>
        </div>
    </div>
    <div class="item-box4-bgcolor">
        <div class="container">
            <div class="item-box4 row">
<div class="left wow shake col-lg-6 col-md-6 col-sm-12 col-xs-12" data-wow-delay="0.5s">
    <div class="title-box">
        <div class="title">
            <span class="num">5</span>
            <span class="title-text">LayaStore</span>
        </div>
        <div class="desc">游戏内容丰富，可安装、可嵌入的HTML5应用商店</div>
       
    </div>
    <div class="text">
        <div class="text-title">嵌入式商店</div>
        <div class="text-desc">       仅20K的嵌入式HTML5应用商店，嵌入到APP中提供托管式HTML5商店
            服务。</div>
    </div>
    <div class="text">
        <div class="text-title">流量变现</div>
        <div class="text-desc">      丰富优质的大型HTML5游戏产品，帮助APP进入流量变现新时代。</div>
    </div>
  
    <div class="image">
        <img src="./images2/image06.png" alt="" style="max-width: 30%; margin: 0 auto;">
    </div>
</div>
<div class="right wow shake col-lg-6 col-md-6 col-sm-12 col-xs-12" data-wow-delay="0.5s">
    <div class="title-box">
        <div class="title">
            <span class="num">6 </span>
            <span class="title-text">LayaPublish</span>
        </div>
        <div class="desc"> 分成高、覆盖广，提供最优秀的全渠道发行服务</div>
       
    </div>
    <div class="text">
        <div class="text-title">覆盖广</div>
        <div class="text-desc">      超过5亿的移动设备安装量覆盖，为CP发行保驾护航</div>
    </div>
    <div class="text">
        <div class="text-title">分成高</div>
        <div class="text-desc">      CP可享受80%发行收益的高分成政策。</div>
    </div>
   
    <div class="image">
        <img src="./images2/image07.png" alt="" style="max-width: 30%; margin: 0 auto;">
    </div>
</div>
            </div>
        </div>
    </div>
    <div class="footer-bgcolor">
        <div class="container">
            <div class="footer row">
        <div class="left col-lg-9 col-md-9 col-md-12 col-xs-12">
<div class="nav-title">公司简介 联系方式 人才招聘</div>
<div class="copy">All Copyright Reserved by Layabox Inc. 京ICP备15008163号-1 </div>
        </div>
        <div class="right col-lg-3 col-md-3 col-md-12 col-xs-12">
          <div class="item">
          
          </div>
          <div class="item">
          <div class="qr-code"></div>
           
          </div>
          <div class="item">
           
          </div>
        </div>
      </div>
        </div>
      </div>
  </body>
  <script src="./js/jquery-3.7.1.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/less.min.js"></script>
  <script>
    new WOW().init();
  </script>
</html>
